//系统自带
const path = require('path')
//手动下载(html)并引用
const html_Webpack_plugin = require('html-webpack-plugin')
//手动下载(css)并引用，并在js中引用需要的css文件
const miniCssExtractPlugin = require('mini-css-extract-plugin')
//手动下载 (压缩css)并引用
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { profile } = require('console');
const config = {
  //模式
  mode: 'development',
  //入口
  entry: { 新闻增删改查: './src/js/新闻增删改查' },
  //出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name]_[hash].js',
    clean: true
  },
  //插件
  plugins: [
    new html_Webpack_plugin({
      //设置生成的html主文件的模板地址
      template: './src/新闻增删改查.html',
      //生成的文件名
      filename: '新闻增删改查.html',
      //必须和上面入口名称一致
      chunks: ['新闻增删改查']
    }),
    //-------------------------------------------
    new miniCssExtractPlugin({
      //生成的文件名和路径
      filename: 'css/[id]_[hash].css'
    }),
    //-------------------------------------------------

  ],
  //除了js之外的其他模块如何处理
  module: {
    rules: [
      //css文件
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, 'css-loader']
      },
      //图片文件
      {
        test: /\.(jpg|png|gif|jpeg)$/,
        type: 'asset',
        generator: {
          filename: 'image/[contenthash][ext]'
        }
      },
      //外部html文件
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      {
        test: /\.tet$/,
        type: 'asset/source'
      },
    ]
  },
  //压缩
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      '...'
    ],
    usedExports: true,//告知 webpack 去决定每个模块使用的导出内容
    concatenateModules: true,//告知 webpack 在打包时，相关代码尽量打包成一个js文件。
  },
  //热更新
  devServer: {
    //端口号
    port: 80,
    //开启热更新
    hot: true,
    //打开服务器时自动开启浏览器访问
    open: true,
    //监控变化的文件，被监控的文件只要发生变化，就会重新编译，自动刷新浏览器
    watchFiles: ['./src/电影增删改查.html'],
    static: {
      //设置express服务器的根目录
      directory: path.join(__dirname, 'dist'),
    },
    Proxy: {
      '/api': {
        target: 'http://127.0.0.1',
        // pathRewrite: { '/api': '/date' },
        changeOrigin: true
      }
    }
  }
}
module.exports = config